<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/public/Header::head('规则计算')"></head>
<body>
<div th:include="include/main/mainTop.html"></div>
<div class="row main_container">
    <div class="col-sm-2 col_nav">
        <div class="accordion" id="accordionNav">
            <div class="card" v-if="user.baseInfo.position=='店长'">
                <div class="card-header" id="headingOne">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <span class="iconfont icon-dianpu"></span>
                            快递站
                        </button>
                    </h2>
                </div>
                <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionNav">
                    <div class="card-body">
                        <a th:href="@{/main}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <span class="iconfont icon-zongti"></span>
                            总体信息
                        </a>
                        <a th:href="@{/staff}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <span class="iconfont icon-yuangong"></span>
                            员工管理
                        </a>
                    </div>
                </div>
            </div>

            <div class="card" v-if="user.baseInfo.position=='店长'||user.baseInfo.position=='财务'">
                <div class="card-header" id="headingTwo">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <span class="iconfont icon-caiwu"></span>
                            财务
                        </button>
                    </h2>
                </div>
                <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionNav">
                    <div class="card-body">
                        <a th:href="@{/rule}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <span class="iconfont icon-guize"></span>
                            规则计算
                        </a>
                        <a th:href="@{/finance}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <span class="iconfont icon-guize"></span>
                            财务
                        </a>
                    </div>
                </div>
            </div>
            <div class="card" v-if="user.baseInfo.position=='店长'||user.baseInfo.position=='内勤'">
                <div class="card-header" id="headingThree">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                            <span class="iconfont icon-gongzuo"></span>
                            内勤
                        </button>
                    </h2>
                </div>
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionNav">
                    <div class="card-body">
                        <a th:href="@{/orderPage}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                            <span class="iconfont icon-kuaidi"></span>
                            快递信息
                        </a>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingFour">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                            <span class="iconfont icon-geren7"></span>
                            个人
                        </button>
                    </h2>
                </div>
                <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionNav">
                    <div class="card-body">
                        <a th:href="@{/job}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour" v-if="user.baseInfo.position=='快递员'||user.baseInfo.position=='财务'||user.baseInfo.position=='内勤'">
                            <span class="iconfont icon-gaiicon-"></span>
                            工作信息
                        </a>
                        <a th:href="@{/account}" class="btn btn-link btn-block text-left" type="button" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                            <span class="iconfont icon-zhanghao"></span>
                            账号信息
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-10 col_page" th:include="include/page/finance.html"></div>
    <script>
        $(function(){
            var data4Vue = {
                urs:'staff',
                urf:'finances',
                ursa:'salarys',
                user:{baseInfo:{}},
                moneyDate:[],
                moneyInput:[],
                moneyOutput:[],
                rule:{},
                moneyInputDay:{money:[],day:[]},
                salaryInput:[],
                salaryDate:[],
                sid:'',
                year:2021,
            };

            //ViewModel
            var vue = new Vue({
                el: '.main_container',
                data: data4Vue,
                mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                    this.mountInformation();
                    this.mountDiagram();
                },
                methods: {
                    mountInformation:async function () {
                        var url=this.urs+"/"+[[${session.user.sid}]]
                        await axios.get(url).then(function(response) {
                            vue.user=response.data;
                        })
                        await axios.get("rules").then(function (response){
                            vue.rule=response.data;
                            console.log(vue.rule)
                        })
                    },
                    mountDiagram:async function (){
                        let url=this.urf;
                        await axios.get(url).then(function(response) {
                            let money=response.data;
                            for(let m of money){
                                let time=new Date(m.date)
                                vue.moneyDate.push(time.getFullYear()+"年"+(time.getMonth()+1)+"月")
                                vue.moneyInput.push(m.income)
                                vue.moneyOutput.push(m.expenditure)
                            }
                        })
                        let now=new Date();
                        var month_packet_num=0;
                        var month_salary=0;
                        var month_packet_fee=0;
                        await axios.get("order/"+now.getFullYear()+"/"+(now.getMonth()+1)).then(function (response) {
                            month_packet_num=response.data;
                            console.log(response)
                        })
                        await axios.get("totalFinance").then(function (response) {
                            month_salary=response.data;
                            console.log(response)
                        })
                        let fee_url="orderFee/"+now.getFullYear()+"/"+(now.getMonth()+1)
                        console.log(fee_url)
                        await axios.get(fee_url).then(function (response){
                            month_packet_fee=response.data;
                            console.log(response)
                        })
                        let date=now.getDate();
                        console.log(date)
                        for(let i=1;i<=date;i++){
                            await axios.get("orderFee/"+now.getFullYear()+"/"+(now.getMonth()+1)+"/"+i).then(function (response) {
                                vue.moneyInputDay.money.push(response.data);
                                vue.moneyInputDay.day.push(i+"日");
                                console.log(now.getFullYear()+"年"+(now.getMonth()+1)+"月"+i+"日:"+response.data);
                            },10)
                        }
                        console.log(month_packet_num)
                        console.log(month_salary)
                        console.log(month_packet_fee)
                        this.moneyDate.push(now.getFullYear()+"年"+(now.getMonth()+1)+"月")
                        this.moneyInput.push(month_packet_fee)
                        this.moneyOutput.push(month_packet_fee*this.rule.perFee+month_packet_num*this.rule.oneFee+month_salary)
                        var input_graph = document.getElementById('input_graph').getContext('2d');
                        var output_graph = document.getElementById('output_graph').getContext('2d');
                        var input_output_graph = document.getElementById('input_output_graph').getContext('2d');
                        var day_graph = document.getElementById('day_graph').getContext('2d');
                        var input_chart = new Chart(input_graph, {
                            type: 'line',
                            data: {
                                labels: this.moneyDate,
                                datasets: [
                                    {
                                        label: '收入',
                                        data: this.moneyInput,
                                        borderColor:'blue',
                                        backgroundColor:'skyBlue',
                                        borderWidth: 1,
                                        fill: false,
                                    }
                                ]
                            }
                        });
                        var output_chart = new Chart(output_graph, {
                            type: 'line',
                            data: {
                                labels: this.moneyDate,
                                datasets: [
                                    {
                                        label: '支出',
                                        data: this.moneyOutput,
                                        borderColor:'red',
                                        backgroundColor:'pink',
                                        borderWidth: 1,
                                        fill: false,
                                    },
                                ]
                            }
                        });
                        var input_output_chart = new Chart(input_output_graph, {
                            type: 'line',
                            data: {
                                labels: this.moneyDate,
                                datasets: [
                                    {
                                        label: '收入',
                                        data: this.moneyInput,
                                        borderColor:'blue',
                                        backgroundColor:'skyBlue',
                                        borderWidth: 1,
                                        fill: false,
                                    },
                                    {
                                        label: '支出',
                                        data: this.moneyOutput,
                                        borderColor:'red',
                                        backgroundColor:'pink',
                                        borderWidth: 1,
                                        fill: false,
                                    },
                                ]
                            }
                        });
                        var day_chart = new Chart(day_graph, {
                            type: 'line',
                            data: {
                                labels: this.moneyInputDay.day,
                                datasets: [
                                    {
                                        label: '收入',
                                        data: this.moneyInputDay.money,
                                        borderColor:'blue',
                                        backgroundColor:'skyBlue',
                                        borderWidth: 1,
                                        fill: false,
                                    },
                                ]
                            }
                        });
                    },
                    search:async function (){
                        this.salaryInput=[];
                        this.salaryDate=[];
                        let url=this.ursa+"/"+this.sid;
                        console.log(url)
                        await axios.get(url).then(function(response) {
                            console.log(response.data)
                            let money=response.data;
                            for(let n=1;n<=12;n++){
                                let flag=false;
                                for (let m of money){
                                    let time=new Date(m.date)
                                    if(time.getFullYear()==vue.year&&(time.getMonth()+1)==n){
                                        vue.salaryDate.push(time.getFullYear()+"年"+n+"月")
                                        vue.salaryInput.push(m.salary)
                                        flag=true;
                                    }
                                }
                                if (!flag){
                                    vue.salaryDate.push(vue.year+"年"+n+"月")
                                    vue.salaryInput.push(0)
                                    flag=true;
                                }
                            }
                        })
                        let salary_graph = document.getElementById('salary_graph').getContext('2d');
                        let salary_chart = new Chart(salary_graph, {
                            type: 'bar',
                            data: {
                                labels:this.salaryDate,
                                datasets: [
                                    {
                                        label: '收入',
                                        data: this.salaryInput,
                                        borderColor:'red',
                                        backgroundColor:'pink',
                                        borderWidth: 1,
                                    }
                                ]
                            }
                        });
                    }
                }
            });
        });
    </script>
</div>
</body>
</html>